<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/dayjs/1.10.8/dayjs.min.js" type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>
  
    <div id="app">
            <div> sex: {{ handleSex(sex) }} </div>
            <!-- vue参考了很多以前前端常用的模板引擎 
                也引入了   管道的概念 
                本质上 就是把竖线前面的 传递给 竖线后面的函数
                由于本质上就是一个函数执行所以vue3当中 没有了这个语法
            -->
            <div> 订单状态: {{ orderState |  orderTxt}} </div>

            <!-- 
                下面的情况 竖线前的会成为第一个参数 
                而过滤器自身传递的参数会后移一位
            -->
            <div> 时间: {{ time | formatTime('YYYY/MM/DD') }} </div>
        
    </div>

        
    
    <script>
       
       // watch 观察  看
        const app = new Vue({
            el:'#app',
            data:{
                sex: 1, // 1 男性  2 女性
                orderState: 2, // 1 已支付 2 已发货 3已完成
                time:  Date.now()
            },
            methods:{
                handleSex(val){
                    if(val === 1) return '男'
                    if(val === 2) return '女'
                }
            },
            // filter 过滤
            filters:{
                orderTxt(val){
                    if(val === 1) return '已支付'
                    if(val === 2) return '已发货'
                    if(val === 3) return '已完成'
                },
                formatTime(arg1,arg2){
                    console.log('第一个参数',arg1)
                    console.log('第2个参数',arg2)

                    return dayjs(arg1).format(arg2)
                    
                }
            }
           
        })

        console.log('app',app)



    </script>

</body>
</html>